<template>
  <div class="rich-text-editor-wrapper">
    <!-- 工具栏 -->
    <Toolbar
      :editor="editorRef"
      :default-config="toolbarConfig"
      :mode="mode"
      class="rich-editor-toolbar"
    />

    <!-- 编辑器 -->
    <Editor
      v-model="valueHtml"
      :default-config="editorConfig"
      :mode="mode"
      class="rich-editor-content"
      :style="{ height: height + 'px' }"
      @onCreated="handleCreated"
      @onChange="handleChange"
      @onBlur="handleBlur"
      @onFocus="handleFocus"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, shallowRef, onBeforeUnmount, watch, nextTick } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { IDomEditor, IEditorConfig, IToolbarConfig } from "@wangeditor/editor";
import "@wangeditor/editor/dist/css/style.css";
import { useUserAuthStore } from "@/store/modules/userAuth";
import { formatToken } from "@/utils/auth";
import {
  uploadGeneralImageApi,
  type UnifiedFileUploadResponse
} from "@/api/user-article";
import { ElMessage } from "element-plus";

// 统一处理图片URL的工具函数
const processImageUrl = (imageUrl: string): string => {
  if (!imageUrl) return "";

  // 如果已经是完整URL，直接返回
  if (imageUrl.startsWith("http")) {
    return imageUrl;
  }

  // 处理相对路径
  const baseUrl = "http://localhost:8081";

  if (imageUrl.startsWith("/files")) {
    // 统一上传接口返回的路径格式
    return `${baseUrl}${imageUrl}`;
  } else if (imageUrl.startsWith("/")) {
    // 其他以 / 开始的路径
    return `${baseUrl}${imageUrl}`;
  } else {
    // 相对路径，默认加上 /files 前缀
    return `${baseUrl}/files/${imageUrl}`;
  }
};

interface Props {
  modelValue?: string;
  height?: number;
  placeholder?: string;
  disabled?: boolean;
  mode?: "default" | "simple";
}

interface Emits {
  (e: "update:modelValue", value: string): void;
  (e: "change", value: string): void;
  (e: "focus"): void;
  (e: "blur"): void;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: "",
  height: 500,
  placeholder: "请输入内容...",
  disabled: false,
  mode: "default"
});

const emit = defineEmits<Emits>();

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef<IDomEditor>();
const valueHtml = ref("");

// 获取用户认证存储
const userAuthStore = useUserAuthStore();

// 工具栏配置
const toolbarConfig: Partial<IToolbarConfig> = {
  excludeKeys: [
    "group-video", // 排除视频
    "fullScreen" // 排除全屏，避免与页面全屏冲突
  ]
};

// 自定义图片上传处理函数
const handleImageUpload = async (file: File, insertFn: Function) => {
  console.log("📷 富文本编辑器开始上传图片:", file.name, file.size);

  try {
    // 检查用户是否已登录
    if (!userAuthStore.isLoggedIn) {
      ElMessage.error("请先登录后再上传图片");
      return;
    }

    // 验证文件类型
    const allowedTypes = [
      "image/jpeg",
      "image/jpg",
      "image/png",
      "image/gif",
      "image/webp"
    ];
    if (!allowedTypes.includes(file.type)) {
      ElMessage.error("仅支持 JPEG、PNG、GIF、WEBP 格式的图片");
      return;
    }

    // 验证文件大小 (5MB)
    const maxSize = 5 * 1024 * 1024;
    if (file.size > maxSize) {
      ElMessage.error("图片大小不能超过 5MB");
      return;
    }

    // 使用项目统一的上传API，该API会自动带上Authorization请求头
    const response = await uploadGeneralImageApi(file);

    if (response.code === 200 && response.data) {
      const originalImageUrl = response.data.fileUrl;
      console.log("🖼️ 富文本编辑器图片原始 URL:", originalImageUrl);

      // 处理图片URL，确保是完整的可访问地址
      const processedImageUrl = processImageUrl(originalImageUrl);
      console.log("✅ 富文本编辑器图片处理后 URL:", processedImageUrl);

      // 插入图片到编辑器
      // wangeditor 插入图片的参数: insertFn(url, alt, href)
      console.log("🔄 开始插入图片到富文本编辑器:", {
        url: processedImageUrl,
        alt: response.data.originalFileName,
        href: processedImageUrl
      });

      // 尝试使用insertFn插入图片
      try {
        insertFn(
          processedImageUrl,
          response.data.originalFileName,
          processedImageUrl
        );
        console.log("✅ 使用insertFn插入成功");
      } catch (error) {
        console.error("❌ insertFn插入失败:", error);

        // 备选方案：直接使用编辑器实例插入
        if (editorRef.value) {
          try {
            console.log("🔄 尝试使用编辑器实例直接插入图片");
            const imgHtml = `<img src="${processedImageUrl}" alt="${response.data.originalFileName}" style="max-width: 100%;" />`;
            editorRef.value.dangerouslyInsertHtml(imgHtml);
            console.log("✅ 使用编辑器实例插入成功");
          } catch (fallbackError) {
            console.error("❌ 编辑器实例插入也失败:", fallbackError);
          }
        }
      }

      // 等待一下，然后检查编辑器内容
      setTimeout(() => {
        const editorContent = editorRef.value?.getHtml();
        console.log("🔍 插入图片后的编辑器内容:", editorContent);

        // 检查是否包含图片
        if (editorContent && editorContent.includes(processedImageUrl)) {
          console.log("✅ 确认图片已成功插入到编辑器中");
        } else {
          console.warn("⚠️ 图片可能未成功插入到编辑器中");
        }
      }, 1000);

      ElMessage.success("图片上传成功");

      console.log("🎉 富文本编辑器图片插入成功");
    } else {
      console.error("❌ 富文本编辑器图片上传失败:", response.message);
      ElMessage.error(response.message || "图片上传失败");
    }
  } catch (error: any) {
    console.error("❌ 富文本编辑器图片上传错误:", error);

    // 提取错误信息
    let errorMessage = "图片上传失败";
    if (error?.response?.data?.message) {
      errorMessage = error.response.data.message;
    } else if (error?.message) {
      errorMessage = error.message;
    } else if (typeof error === "string") {
      errorMessage = error;
    }

    ElMessage.error(errorMessage);
  }
};

// 编辑器配置
const editorConfig: Partial<IEditorConfig> = {
  placeholder: props.placeholder,
  readOnly: props.disabled,
  MENU_CONF: {
    // 使用自定义图片上传
    uploadImage: {
      customUpload: handleImageUpload
    }
  }
};

// 监听外部 modelValue 变化
watch(
  () => props.modelValue,
  newVal => {
    if (newVal !== valueHtml.value) {
      valueHtml.value = newVal || "";
    }
  },
  { immediate: true }
);

// 监听编辑器内容变化
watch(valueHtml, newVal => {
  emit("update:modelValue", newVal);
  emit("change", newVal);
});

// 编辑器创建完成
const handleCreated = (editor: IDomEditor) => {
  editorRef.value = editor;
  console.log("富文本编辑器创建完成", editor);
};

// 编辑器内容变化
const handleChange = (editor: IDomEditor) => {
  // 内容已经通过 v-model 自动同步到 valueHtml
  console.log("富文本编辑器内容变化", editor.getHtml());
};

// 编辑器获得焦点
const handleFocus = () => {
  emit("focus");
};

// 编辑器失去焦点
const handleBlur = () => {
  emit("blur");
};

// 获取编辑器实例（供外部调用）
const getEditor = () => {
  return editorRef.value;
};

// 设置编辑器内容
const setHtml = (html: string) => {
  if (editorRef.value) {
    editorRef.value.setHtml(html);
  }
};

// 获取编辑器HTML内容
const getHtml = () => {
  return editorRef.value?.getHtml() || "";
};

// 获取编辑器纯文本内容
const getText = () => {
  return editorRef.value?.getText() || "";
};

// 清空编辑器内容
const clear = () => {
  if (editorRef.value) {
    editorRef.value.clear();
  }
};

// 禁用/启用编辑器
const setDisabled = (disabled: boolean) => {
  if (editorRef.value) {
    if (disabled) {
      editorRef.value.disable();
    } else {
      editorRef.value.enable();
    }
  }
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

// 暴露方法给父组件
defineExpose({
  getEditor,
  setHtml,
  getHtml,
  getText,
  clear,
  setDisabled
});
</script>

<style scoped lang="scss">
@import url("@/styles/unified-code-styles.css");

// 响应式设计
@media (width <= 768px) {
  .rich-text-editor-wrapper {
    .rich-editor-toolbar {
      :deep(.w-e-toolbar) {
        flex-wrap: wrap;

        .w-e-bar-item {
          margin: 2px;
        }
      }
    }

    .rich-editor-content {
      :deep(.w-e-text) {
        padding: 12px;

        // 移动端代码块样式（通过统一样式文件处理）
      }
    }
  }
}

.rich-text-editor-wrapper {
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;

  .rich-editor-toolbar {
    border-bottom: 1px solid #e8e8e8;

    :deep(.w-e-toolbar) {
      background: #fafafa;
      border: none;

      .w-e-bar-item {
        &:hover {
          background: #e8f4fd;
        }

        &.w-e-bar-item-active {
          color: #1890ff;
          background: #cfe9fe;
        }
      }
    }
  }

  .rich-editor-content {
    :deep(.w-e-text-container) {
      border: none;

      .w-e-text-placeholder {
        font-style: normal;
        color: #999;
      }

      .w-e-text {
        min-height: 300px;
        padding: 16px;
        line-height: 1.6;

        // 内容样式优化
        p {
          margin: 0 0 10px;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          margin: 20px 0 10px;
          font-weight: 600;
        }

        h1 {
          font-size: 28px;
        }

        h2 {
          font-size: 24px;
        }

        h3 {
          font-size: 20px;
        }

        h4 {
          font-size: 18px;
        }

        h5 {
          font-size: 16px;
        }

        h6 {
          font-size: 14px;
        }

        ul,
        ol {
          padding-left: 20px;
          margin: 10px 0;

          li {
            margin: 5px 0;
          }
        }

        blockquote {
          padding: 10px 15px;
          margin: 15px 0;
          color: #555;
          background: #f0f8ff;
          border-left: 4px solid #1890ff;
        }

        // 使用统一的代码块样式（通过CSS类应用）

        table {
          width: 100%;
          margin: 15px 0;
          border-collapse: collapse;

          th,
          td {
            padding: 8px 12px;
            text-align: left;
            border: 1px solid #ddd;
          }

          th {
            font-weight: 600;
            background: #f5f5f5;
          }

          tr:nth-child(even) {
            background: #fafafa;
          }
        }

        img {
          max-width: 100%;
          height: auto;
          margin: 10px 0;
          border-radius: 4px;
          box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
        }

        a {
          color: #1890ff;
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }

    // 滚动条样式
    :deep(.w-e-scroll) {
      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
      }

      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 3px;

        &:hover {
          background: #999;
        }
      }
    }
  }

  // 禁用状态
  &.disabled {
    .rich-editor-toolbar {
      pointer-events: none;
      opacity: 0.5;
    }

    .rich-editor-content {
      :deep(.w-e-text) {
        color: #999;
        background: #f5f5f5;
      }
    }
  }

  // 焦点状态
  &:focus-within {
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
  }
}
</style>
